<!--
 * @Author: your name
 * @Date: 2021-07-17 01:34:40
 * @LastEditTime: 2021-07-21 16:38:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue\7.17\src\views\doc\DocumentPlaceholder.vue
-->
<template>
  <div>
    <el-carousel
      :interval="4000"
      type="card"
      height="200px"
      style="background: rgb(247,247,247)"
    >
      <el-carousel-item v-for="item in goodsList" :key="item.img">
        <img :src="item.img" @click="goGoodsDesc(item)" />
      </el-carousel-item>
    </el-carousel>
    <br />
    <el-container>
      <div style="float: left; width: 35%">
        <!--左边栏空白占位  -->
      </div>
      <div style="float: center; width: 30%">
        <span style="float: left; width: 60%">  
          <el-input
            placeholder="查询猫猫"
            v-model="selectd"
            class="input-with-select">
          </el-input>
        </span>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <br><br>
        <span>热门搜索：</span>
        <span v-for="item in goodsList" :key="item.id" style="color: #bfbfbf">
          <el-button type="text" id="1" @click="goGoodsDesc(item)"
            >{{item.name}}
          </el-button>
        </span>
        
      </div>
    </el-container>

    <br />
    <div>
      <el-container>
        <div style="float: left; width: 10%; background-color: #dcdfe6">
          <!--左边栏空白占位  -->
        </div>
        <div style="float: left; width: 80%">
          <div
            class="card"
            v-for="(item, index) in goodsList"
            :key="item.id"
            v-on:mouseenter="showDialog(index)"
            v-on:mouseleave="hideDialog()"
          >
            <div class="ribbon">
              <!--鼠标移入移出事件-->
              <div class="handleDialog" v-if="ishow && index == current">
                <el-button
                  type="success"
                  style="margin-left: 25%; margin-top: 70%"
                  size="medium"
                  @click="goGoodsDesc(item)"
                  >查看详情</el-button
                >
                <el-button
                  type="warning"
                  icon="el-icon-star-off"
                  circle
                  size="medium"
                ></el-button>
              </div>
              <img :src="item.img" style="height: 100%; width: 100%" />
              <div class="wrap">
                <span class="ribbon6" style="color: #000"
                  ><span style="color: #f2f8fe">2.12猫の日特惠</span></span
                >
              </div>
            </div>
            <div style="text-align: center">
              <span>{{ item.name }}</span>
              <span>{{ item.desc }}</span>
              <span>配种收费：&yen;{{ item.prize }}</span>
            </div>
          </div>
        </div>
        <div style="float: left; width: 10%; background-color: #dcdfe6">
          <!--右边栏空白占位  -->
        </div>
      </el-container>
      <br />
      <div>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      ishow: false,
      current: 0,
      selectd: "",
      currentDate: new Date(),
      goodsList: [
        {
          id: 1,
          name: "波斯猫",
          img: "http://n.sinaimg.cn/sinacn/w461h517/20171215/ff54-fypsqka0066633.jpg",
          prize: "599.00",
          desc: "猫龄：6个月",
        },
        {
          id: 2,
          name: "英短",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01d9dff4e1843c202e.jpg",
          prize: "279.00 ",
          desc: "猫龄：7个月",
        },
        {
          id: 3,
          name: "狸花猫",
          img: "https://p2.ssl.qhimgs1.com/sdr/400__/t0103158cddf16d115c.jpg",
          prize: "576.00",
          desc: "猫龄：8个月",
        },
        {
          id: 4,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "589.00",
          desc: "猫龄：9个月",
        },
        {
          id: 5,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "211.00",
          desc: "猫龄：10个月",
        },
        {
          id: 6,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "349.00",
          desc: "猫龄：11个月",
        },
        {
          id: 7,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "229.00",
          desc: "猫龄：12个月",
        },
        {
          id: 8,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "319.00",
          desc: "猫龄：13个月",
        },
        {
          id: 9,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "269.00",
          desc: "猫龄：14个月",
        },
        {
          id: 10,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "479.00",
          desc: "猫龄：15个月",
        },
        {
          id: 11,
          name: "加菲猫",
          img: "https://p0.ssl.qhimgs1.com/sdr/400__/t01123e197e7c867946.jpg",
          prize: "179.00",
          desc: "猫龄：16个月",
        },
      ],
    };
  },
  methods: {
    //前往商品详情页
    goGoodsDesc(goods) {
      this.$router.push({
        path: "/goodsDesc",
        query: {
          goodsId: goods.id,
          goodsName: goods.name,
          goodsImg: goods.img,
          goodsPrice: goods.prize,
          goodsDesc: goods.desc,
        },
      });
    },
    //显示操作项
    showDialog(index) {
      this.ishow = true;
      this.current = index;
    },
    //隐藏蒙层
    hideDialog() {
      this.ishow = false;
      this.current = null;
    },
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
/**
  隐藏页
  */
.handleDialog {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

/**
  卡片
   */

.card {
  height: 350px;
  width: 266px;
  margin-left: 30px;
  margin-top: 30px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 4px;
  float: left;
}
.card img {
  width: 100%;
  height: 70%;
}
.card span {
  font-size: 15px;
  color: #bfbfbf;
  display: block;
  letter-spacing: 2px;
}
.ribbon {
  display: inline-block;
  width: 100%;
  height: 70%;
  position: relative;
  margin-bottom: 30px;
  background-size: cover;
  text-transform: uppercase;
  color: white;
}

.wrap {
  width: 100%;
  height: 188px;
  position: absolute;
  top: -8px;
  left: 8px;
  overflow: hidden;
}
.wrap:before {
  content: "";
  display: block;
  border-radius: 8px 8px 0px 0px;
  width: 40px;
  height: 8px;
  position: absolute;
  right: 100px;
  background: #4d6530;
}
.wrap:after {
  content: "";
  display: block;
  border-radius: 0px 8px 8px 0px;
  width: 8px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 100px;
  background: #4d6530;
}
.ribbon6 {
  display: inline-block;
  text-align: center;
  width: 200px;
  height: 40px;

  line-height: 40px;
  position: absolute;
  top: 30px;
  right: -50px;
  z-index: 2;
  overflow: hidden;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  border: 1px dashed;
  box-shadow: 0 0 0 3px #57dd43, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
  background: #57dd43;
}
</style>